<template>
	<!-- 评论组件 -->
	<view class="" v-if="comment.id">
		<view class="comment bgfff">
			<view class="comment-info flex-center-between">
				<view class="flex-center">
					<image :src="comment.pic" mode="aspectFill"></image>
					<text class="font32 color333">{{ comment.memberName }}</text>
				</view>
				<view class="more-border" @tap="openOp">
					<image class="icon-more img-size-repeat"></image>
				</view>
			</view>
			<view class="comment-time font26 color888" @tap="goto()">
				{{ comment.consultAddtime }} {{ comment.attr }}
			</view>
			<view class="comment-grade flex-center" @tap="goto()">
				<text class="font28 color333 fontb">商品评分</text>
				<view class="comment-start flex-center">
					<text class="icon-start" :class="{'icon-starta': index < comment.score}" 
						v-for="(item, index) in 5" :key="index"></text>
				</view>
			</view>
			<view class="comment-text font30 color333" id="comment" :class="{'comment-text-eight': ctext && ctoggle}" @tap="goto()">
				{{ comment.consultContent }}
			</view>
			<view class="text-hide font28 color333 fontb flex-center" :class="{'text-show': !ctoggle}" v-if="ctext" @tap="ctoggle = !ctoggle">
				{{ctoggle ? '展开' : '收起'}}
				<view><text class="yticon icon-you"></text></view>
			</view>
			<view class="comment-photo flex-wrap">
				<view class="comment-image" :class="{'comment-image-more': comment.images.length > 1}"
					v-for="(item, index) in comment.images" :key="index">
					<image :src="item" mode="aspectFill" @tap="showImg(item, index)"></image>
				</view>
			</view>
			<view class="comment-return-border font28" v-if="comment.treasurer">
				<view class="comment-return" id="commentretrun" :class="{'comment-return-five': rtext && rtoggle}" @tap="goto()">
					掌柜回复：{{ comment.treasurer }}
				</view>
				<view class="text-hide text-hidea font28 color333 fontb flex-center" :class="{'text-show': !rtoggle}" v-if="rtext" @tap="rtoggle = !rtoggle">
					{{rtoggle ? '展开' : '收起'}}
					<view><text class="yticon icon-you"></text></view>
				</view>
			</view>
			<view class="comment-shop flex-center" v-if="type === 'des' && comment.goodsImg && comment.goodsName && comment.price"
				@tap="goShop">
				<image :src="comment.goodsImg" mode="aspectFill"></image>
				<view class="flex-column-between">
					<view class="comment-shop-text font28 color333 fontb">{{ comment.goodsName }}</view>
					<view class="font26 money">¥{{ comment.price }}</view>
				</view>
			</view>
		</view>
		<view class="comment-bottom flex-center bgfff">
			<view class="flex-center bottom-like" :style="{'pointer-events': more}" @tap="clickLike">
				<image class="icon-nolike img-size-repeat" :class="{'icon-like': comment.isPraise}"></image>
				<text class="font24 color6666">{{comment.praise ? numFormat(comment.praise) : '点赞' }}</text>
			</view>
			<view class="flex-center bottom-dis" @tap="goto()">
				<image class="icon-commen img-size-repeat"></image>
				<text class="font24 color6666">{{comment.commentNumber ? numFormat(comment.commentNumber) : '评论' }}</text>
			</view>
		</view>
		<actionSheet v-model="show" :actions="actions" @select="select"></actionSheet>
	</view>
</template>

<script>
import Api from '@/common/api'
import actionSheet from '@/components/actionSheet'
export default {
	data() {
		return {
			actions: ['举报'],
			show: false, // 举报展示或取消
			ctext: false, // 文本是否超过8行
			ctoggle: true,  // 文本切换
			rtext: false, // 文本是否超过5行
			rtoggle: true,  // 掌柜切换
			more: 'auto', // 防止多次点击
		}
	},
	mounted() {
		this.handleHeight()
	},
	methods: {
		// 打开右上角的操作
		openOp() {
			if(this.op) {
				this.actions = []
				// 0不匿名1匿名
				this.actions.push(this.comment.isanonymous ? '设置为匿名' : '不想匿名了')
				// 0可以评论1不可以评论
				this.actions.push(this.comment.commentStatus ? '设置为不可评论' : '设置为可评论')
				// 0显示评价1隐藏评价
				this.actions.push(this.comment.status ? '隐藏评价' : '显示评价')
			}
			this.show = true
		},
		// 操作
		select(item) {
			let res = null
			switch(item) {
				case '举报': 
					uni.navigateTo({ url: '/pages/homeDesign/Report?commentId='+ this.comment.id })
				break
				case '设置为匿名': 
				case '不想匿名了': 
					res = Api.apiCall('get', Api.goods.setCommentAnonymity, { id: this.comment.id}, true)
					if(res) {
						this.comment.isanonymous ? this.$api.msg('评价已匿名') : this.$api.msg('评价已取消匿名')
						this.$emit('commentOp', 'isanonymous', !this.comment.isanonymous, this.index)
					}
				break
				case '设置为不可评论': 
				case '设置为可评论': 
					res = Api.apiCall('get', Api.goods.setIsComment, { id: this.comment.id}, true)
					if(res) {
						this.comment.commentStatus ? this.$api.msg('该评价已设置为不可评论') : this.$api.msg('该评价已设置为允许评论')
						this.$emit('commentOp', 'commentStatus', !this.comment.commentStatus, this.index)
					}
				break
				case '隐藏评价': 
				case '显示评价': 
					res = Api.apiCall('get', Api.goods.setIsShowComment, { id: this.comment.id}, true)
					if(res) {
						this.comment.status ? this.$api.msg('评价已被隐藏') : this.$api.msg('评价已显示')
						this.$emit('commentOp', 'status', !this.comment.status, this.index)
					}
				break
			}
		},
		// 页面跳转
		goShop() {
			uni.navigateTo({ url: '/pages/product/product?id='+ this.comment.goodsId })
		},
		// 处理数据超过
		numFormat(value) {
			value = parseInt(value)
			return value>10000 ? parseInt((value-value%1000)/10000)+'w+' : (value)
		},
		// 计算评论和掌柜回复的高度
		handleHeight() {
			if(this.comment.id) {
				// 评论高度
				uni.createSelectorQuery().select('#comment')
				.boundingClientRect(obj => {
					if(uni.upx2px(46) * 8 < obj.height) {
						this.ctext = true
					}
				}).exec()
			}
			// 掌柜高度
			if(this.comment.treasurer) {
				uni.createSelectorQuery().select('#commentretrun')
				.boundingClientRect(obj => {
					if(uni.upx2px(46) * 5 < obj.height) {
						this.rtext = true
					}
				}).exec()
			}
		},
		// 预览图片
		showImg(item, index) {
			this.$emit('openPhoto', item, index)
		},
		// 去评价详情页面
		goto() {
			if(this.type === 'des') return
			let url = '/pages/comment/commentDes?id=' + this.comment.id
			if(this.op) {
				url = '/pages/comment/commentDes?op=my&index=' + this.index + '&id=' + this.comment.id
			}
			uni.navigateTo({ url })
		},
		// 点赞或取消点赞
		async clickLike() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			this.more = 'none'
			let flag = !this.comment.isPraise 
			let res = await Api.apiCall('get', Api.goods.commentLike, { 
				id: this.comment.id,
				praiseType: flag ? 0 : 1, // 0点赞，1取消
			}, true)
			if(res) {
				let msg = ''
				msg = flag ? '点赞成功' : '取消点赞'
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.$emit('like', flag, this.index)
				this.more = 'auto'
			}else {
				this.more = 'auto'
			}
		},
	},
	components: {
		actionSheet
	},
	// type是类型all全部评价、des评价详情，index评论索引, op右上角操作(有值是我的评价)
	props: ['comment', 'type', 'index', 'op']
}
</script>

<style lang="scss">
.comment {
	overflow: hidden;
	padding: 30rpx 30rpx 0;
	letter-spacing: 1rpx;
	.comment-info {
		height: 86rpx;
		line-height: 86rpx;
		margin: 0 0 30rpx;
		.flex-center {
			image {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
		}
		.more-border {
			width: 86rpx;
			height: 86rpx;
			text-align: right;
			.icon-more {
				vertical-align: super;
				width: 34rpx;
				height: 6rpx;
				background-image: url('/static/image/commentmore.png');
			}
		}
	}
	.comment-time {
		margin-bottom: 18rpx;
	}
	.comment-grade {
		height: 40rpx;
		line-height: 40rpx;
		&>text {
			margin-right: 21rpx;
		}
		.comment-start {
			margin-top: -5rpx;
			text {
				margin-right: 16rpx;
			}
			.icon-start {
				width: 30rpx;
				height: 29rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('/static/image/start.png');
			}
			.icon-starta {
				background-image: url('/static/image/starta.png');
			}
		}
	}
	.comment-text {
		line-height: 46rpx;
		margin: 30rpx 0;
		letter-spacing: 1rpx;
		&.comment-text-eight {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 8;  /*要显示的行数*/
			-webkit-box-orient: vertical;
		}
	}
	.text-hide {
		margin: 30rpx 0;
		view {
			margin-left: 5rpx;
			transform: rotate(90deg);
		}
		&.text-show {
			view {
				margin-bottom: 10rpx;
				transform: rotate(270deg);
			}
		}
		&.text-hidea {
			margin: 30rpx 0 12rpx;
		}
	}
	.comment-photo {
		margin-bottom: 30rpx;
		.comment-image {
			image {
				width: 400rpx;
				height: 400rpx;
			}
			&.comment-image-more {
				image {
					width: 220rpx;
					height: 220rpx;
				}
				&:not(:nth-child(3n)) {
					margin-right: 15rpx;
				}
				&:not(:nth-child(-n+3)) {
					margin-top: 10rpx;
				}
			}
		}
	}
	.comment-return-border {
		padding: 18rpx 16rpx;
		width: 100%;
		border-radius: 8rpx;
		background-color: #F5F5F5;
		position: relative;
		margin-bottom: 30rpx;
		.comment-return {
			color: #C84739;
			line-height: 46rpx;
			&.comment-return-five {
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 5;  /*要显示的行数*/
				-webkit-box-orient: vertical;
			}
		}
		&::before {
			content: '';
			position: absolute;
			left: 20rpx;
			top: -40rpx;
			width: 0;
			height: 0;
			border: 22rpx solid;
			border-color: transparent transparent #F5F5F5;
		}
	}
	.comment-shop {
		width: 100%;
		height: 140rpx;
		border: 1rpx solid #EEE;
		background-color: #F6F6F6;
		margin-bottom: 30rpx;
		image {
			width: 138rpx;
			height: 138rpx;
			margin-right: 20rpx;
		}
		&>view {
			padding: 30rpx 0;
			width: 500rpx;
			height: 140rpx;
			.comment-shop-text {
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;  /*要显示的行数*/
				-webkit-box-orient: vertical;
			}
			.money {
				color: #F0421E;
			}
		}
	}
}
.icon-you {
	font-size: $font-base - 4upx;
	color: #333;
}
.comment-bottom {
	height: 85rpx;
	margin-bottom: 16rpx;
	border-top: 1rpx solid #ddd;
	justify-content: flex-end;
	.bottom-like {
		margin-right: 60rpx;
		.icon-nolike {
			margin-right: 10rpx;
			width: 22rpx;
			height: 24rpx;
			background-image: url('/static/image/commentnolike.png');
			&.icon-like {
				background-image: url('/static/image/commentlike.png');
			}
		}
	}
	.bottom-dis {
		margin-right: 30rpx;
		.icon-commen {
			margin-right: 10rpx;
			width: 26rpx;
			height: 24rpx;
			background-image: url('/static/image/commenteval.png');
		}
	}
}
</style>
